<template>
	<view class="about-container">
		<!-- 顶部banner -->
		<view class="banner">
			<image src="https://img.js.design/assets/img/6743f93bde61f2f62ef6e43e.png#14b1cc639af2a752163c67b8b34a2588" mode="aspectFill"></image>
		</view>
		
		<!-- 品牌介绍 -->
		<view class="brand-intro">
			<view class="title">西望旅行</view>
			<view class="desc">
				专注川西深度旅行，由一群平均年龄27岁的旅游玩家共同创立的新文旅品牌。秉持只做Z时代纯玩，打造川西小众路线，让每位旅行者都能感受到川西的独特魅力。
			</view>
		</view>
		
		<!-- 核心优势 -->
		<view class="advantages">
			<view class="advantage-item">
				<image src="https://img.icons8.com/color/96/000000/group.png" mode="aspectFit"></image>
				<text>深耕川西</text>
				<text class="sub-text">本地专业团队</text>
			</view>
			<view class="advantage-item">
				<image src="https://img.icons8.com/color/96/000000/beach-umbrella.png" mode="aspectFit"></image>
				<text>纯玩体验</text>
				<text class="sub-text">无购物无套路</text>
			</view>
			<view class="advantage-item">
				<image src="https://img.icons8.com/color/96/000000/map.png" mode="aspectFit"></image>
				<text>小众路线</text>
				<text class="sub-text">避开旅游密集区</text>
			</view>
		</view>
		
		<!-- 品牌理念 -->
		<view class="brand-concept">
			<view class="section-title">品牌理念</view>
			<view class="concept-content">
				<image src="https://img.js.design/assets/img/678e0bae88986af56602b439.png#9e9c9dda05bbc59155b5cf04caffccb7" mode="aspectFill"></image>
				<view class="concept-text">
					<text class="highlight">探索世界的西向，寻找诗和远方</text>
					<text class="detail">
						我们致力于为Z世代打造独特的旅行体验，让每一次旅程都充满惊喜与感动。
						专注于小团定制，确保每位旅行者都能获得优质的服务体验。
					</text>
				</view>
			</view>
		</view>

		<!-- 我们的服务 -->
		<view class="our-services">
			<view class="section-title" style="margin-bottom: 20rpx;">特色路线</view>
			<view class="service-list">
				<view class="service-item">
					<image src="https://img.icons8.com/color/96/000000/mountain.png" mode="aspectFit"></image>
					<text class="service-title">稻城亚丁</text>
					<text class="service-desc">蓝天白云，雪山草地，最后的香格里拉</text>
				</view>
				<view class="service-item">
					<image src="https://img.icons8.com/color/96/000000/pagoda.png" mode="aspectFit"></image>
					<text class="service-title">色达佛学院</text>
					<text class="service-desc">世界最大佛学院，震撼红房子</text>
				</view>
				<view class="service-item">
					<image src="https://img.icons8.com/color/96/000000/lake.png" mode="aspectFit"></image>
					<text class="service-title">四姑娘山</text>
					<text class="service-desc">蜀山皇后，绝美山峰冰川</text>
				</view>
				<view class="service-item">
					<image src="https://img.icons8.com/color/96/000000/forest.png" mode="aspectFit"></image>
					<text class="service-title">丹巴藏寨</text>
					<text class="service-desc">最美藏寨，千年嘉绒文化</text>
				</view>
			</view>
		</view>

		<!-- 团队介绍 -->
		<view class="team-intro">
			<view class="section-title" style="margin-bottom: 20rpx;">核心团队</view>
			<view class="team-members">
				<view class="member-card">
					<image src="https://img.js.design/assets/img/678e130e19abf04c1476ea99.jpg#21f1098742098950d6b1583f821c63e1" mode="aspectFill"></image>
					<text class="member-name">周航锐</text>
					<text class="member-role">创始人</text>
					<text class="member-desc">川西地区资深向导，8年高原旅行经验，熟悉川西所有秘境！</text>
				</view>
				<view class="member-card">
					<image src="https://img.js.design/assets/img/678e167e2bd8fa167e9fb03f.jpg#f85ef29139e1c977bf19f6d761d36513" mode="aspectFill"></image>
					<text class="member-name">数智先锋</text>
					<text class="member-role">首席技术团队</text>
					<text class="member-desc">为客户打造独特的数字化旅游平台，为用户提供更高效、更智能的旅行体验。</text>
				</view>
			</view>
		</view>

		<!-- 用户评价 -->
		<view class="testimonials">
			<view class="section-title">旅行者说</view>
			<swiper class="testimonial-swiper" circular autoplay interval="3000">
				<swiper-item v-for="(item, index) in testimonials" :key="index">
					<view class="testimonial-card">
						<text class="quote">"{{item.content}}"</text>
						<view class="author">
							<text class="name">{{item.name}}</text>
							<text class="trip">{{item.trip}}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 联系我们 -->
		<view class="contact-us">
			<view class="section-title" style="margin-bottom: 20rpx;">联系我们</view>
			<view class="contact-info">
				<view class="contact-item">
					<text class="icon">📱</text>
					<text>咨询电话：400-888-8888</text>
				</view>
				<view class="contact-item">
					<text class="icon">💬</text>
					<text>微信客服：XiWang666</text>
				</view>
				<view class="contact-item">
					<text class="icon">📧</text>
					<text>商务合作：business@xiwang.com</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const testimonials = [
		{
			content: '感谢西望让我遇见最美的稻城！导游专业贴心，行程安排很合理，完全不用担心高原反应。',
			name: '小美',
			trip: '稻城亚丁深度游'
		},
		{
			content: '第一次去色达，震撼到说不出话。感谢扎西哥的细心讲解，让我们更深入地了解藏传佛教文化。',
			name: '阿杰',
			trip: '色达佛学院朝圣之旅'
		},
		{
			content: '川西小环线绝美！避开了旅游旺季和密集景点，体验了最原汁原味的川西风光。',
			name: '晓华',
			trip: '川西小环线'
		}
	]
</script>

<style lang="scss" scoped>
.about-container {
	padding-bottom: 40rpx;
	
	.banner {
		width: 100%;
		height: 350rpx;
		overflow: hidden;
		
		image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	
	.brand-intro {
		padding: 40rpx;
		text-align: center;
		
		.title {
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		
		.desc {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
		}
	}
	
	.advantages {
		display: flex;
		justify-content: space-around;
		padding: 40rpx 20rpx;
		background-color: #f8f8f8;
		
		.advantage-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			image {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 12rpx;
			}
			
			text {
				font-size: 28rpx;
				color: #333;
			}
			
			.sub-text {
				font-size: 24rpx;
				color: #999;
				margin-top: 8rpx;
			}
		}
	}
	
	.brand-concept {
		padding: 40rpx;
		
		.section-title {
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
			text-align: center;
		}
		
		.concept-content {
			image {
				width: 100%;
				height: 240rpx;
				border-radius: 12rpx;
				margin-bottom: 20rpx;
			}
			
			.concept-text {
				.highlight {
					display: block;
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 16rpx;
				}
				
				.detail {
					font-size: 28rpx;
					color: #666;
					line-height: 1.6;
				}
			}
		}
	}

	.our-services {
		padding: 40rpx;
		background: #fff;
		
		.service-list {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 30rpx;
			
			.service-item {
				background: #f8f8f8;
				padding: 30rpx;
				border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				
				image {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 16rpx;
				}
				
				.service-title {
					font-size: 28rpx;
					font-weight: bold;
					margin-bottom: 8rpx;
				}
				
				.service-desc {
					font-size: 24rpx;
					color: #666;
					text-align: center;
				}
			}
		}
	}

	.team-intro {
		padding: 40rpx;
		
		.team-members {
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			gap: 20rpx;
			
			.member-card {
				width: 320rpx;
				background: #fff;
				border-radius: 16rpx;
				overflow: hidden;
				box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
				
				image {
					width: 100%;
					height: 300rpx;
					object-fit: cover;
				}
				
				.member-name {
					display: block;
					font-size: 32rpx;
					font-weight: bold;
					padding: 16rpx;
				}
				
				.member-role {
					display: block;
					font-size: 26rpx;
					color: #666;
					padding: 0 16rpx;
				}
				
				.member-desc {
					display: block;
					font-size: 24rpx;
					color: #999;
					padding: 16rpx;
					line-height: 1.4;
				}
			}
		}
	}

	.testimonials {
		padding: 40rpx;
		background: #f8f8f8;
		
		.testimonial-swiper {
			height: 300rpx;
			
			.testimonial-card {
				margin: 20rpx;
				padding: 30rpx;
				background: #fff;
				border-radius: 16rpx;
				height: 260rpx;
				
				.quote {
					font-size: 28rpx;
					color: #333;
					line-height: 1.6;
				}
				
				.author {
					margin-top: 20rpx;
					
					.name {
						font-size: 26rpx;
						font-weight: bold;
					}
					
					.trip {
						font-size: 24rpx;
						color: #999;
						margin-left: 16rpx;
					}
				}
			}
		}
	}

	.contact-us {
		padding: 40rpx;
		
		.contact-info {
			background: #f8f8f8;
			border-radius: 16rpx;
			padding: 30rpx;
			
			.contact-item {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				
				.icon {
					margin-right: 16rpx;
					font-size: 32rpx;
				}
				
				text {
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}
}
</style>
